<template>
<div v-if="showOverlay" id="overlay" class="overlay" @mousedown.prevent="startDrag($event)">
  <!-- 按钮和关闭按钮 -->
  <button @click="createErp">创建今日erp日报</button>
  <button>Button 2</button>
  <button id="closeButton" @click="hideOverlay">X</button>
</div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      showOverlay: true,
      currRoute: window.location.href,
      erpRoute: [
        "https://erpnew.cwoa.net/#/WorkDaily",
        // ...其他路由
      ],
      cwbkRoute: [
        "paas.cwbk.com/login"
      ]
    };
  },
  mounted() {
    this.routeCheck();
  },
  methods: {
    routeCheck() {
      if (this.erpRoute.includes(this.currRoute)) {
        this.showOverlay = true;
        this.autoHandleERP();
      } else if (this.cwbkRoute.includes(this.currRoute)) {
        this.autoHandleCWBK();
      } else {
        console.log("not in erp or cwbk");
      }
    },
    autoHandleERP() {
      // 实现autoHandleERP逻辑，如调用loadCSS, createOverlay等
      this.loadCSS();
      // 注意Vue中DOM操作应尽量避免，考虑使用数据绑定来控制显示
    },
    loadCSS() {
      // 这里可以使用Vue的动态样式绑定或者在mounted钩子中直接引用CSS
      // 但原生Promise加载CSS的方式在Vue中并不推荐，应考虑其他方式如import或在index.html中静态引入
    },
    createOverlay() {
      // 这里的DOM操作逻辑应该转换为Vue的数据绑定和指令来实现
      this.showOverlay = true;
    },
    hideOverlay() {
      this.showOverlay = false;
    },
    startDrag() {
      // 拖动逻辑可以封装为一个方法，但Vue中更推荐使用第三方库如vuedraggable处理拖拽
    },
    createErp() {
      // 创建今日erp日报的逻辑
    },
    autoHandleCWBK() {
      // 自动处理CWBK逻辑
    }
  }
};
</script>

<style scoped>
.overlay {
  position: fixed;
  top: 10px;
  left: calc(100% - 210px);
  right: 0;
  width: 350px;
  height: 200px;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  background-color: rgba(0, 0, 0, 0.25);
  color: white;
  font-size: 18px;
  padding: 20px;
  box-sizing: border-box;
}
</style>